import echarts from 'echarts'

export default {
  data () {
    return {
      lineChart: null
    }
  },
  methods: {
    renderLineChart (list) {
      const colorList = [
        ['#9effff', '#9E87FF', 'rgba(158,135,255, 0.3)', '#9E87FF'],
        ['#73DD39', '#73DDFF', 'rgba(115,221,255, 0.3)', '#73DDFF'],
        ['#fe9a', '#fe9a8b', 'rgba(254,154,139, 0.3)', '#fe9a8b'],
        ['#9E87FF', '#9E87FF', 'rgba(158,135,255, 0.3)', '#9E87FF'],
        ['#9E87FF', '#73DDFF', 'rgba(115,221,255, 0.3)', '#73DDFF']
      ]
      const xLabel = []
      const dataObj = {
        data0: [],
        data1: [],
        data2: []
      }
      list.forEach((item, i) => {
        xLabel.push(item.date.substring(5))
        dataObj.data0.push(item.received)
        dataObj.data1.push(item.receiving)
        dataObj.data2.push(item.total)
      })
      const series = ['已收', '未收', '应收'].map((_name, i) => {
        return {
          name: _name,
          type: 'line',
          data: dataObj[`data${i}`],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: colorList[i][0]
            },
            {
              offset: 1,
              color: colorList[i][1]
            }
            ]),
            shadowColor: colorList[i][2],
            shadowBlur: 5,
            shadowOffsetY: 10
          },
          itemStyle: {
            normal: {
              color: colorList[i][3],
              borderColor: colorList[3]
            }
          }
        }
      })
      const option = {
        backgroundColor: '#fff',
        legend: {
          icon: 'circle',
          top: '5%',
          right: 'center',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '15%'
        },
        xAxis: [{
          type: 'category',
          data: xLabel,
          axisLine: {
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#556677'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          axisPointer: {
            label: {
              // padding: [11, 5, 7],
              padding: [0, 0, 10, 0],
              /*
    除了padding[0]建议必须是0之外，其他三项可随意设置

    和CSSpadding相同，[上，右，下，左]

    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

    padding[2]的10:

    10 = 文字距下边线的距离 + 下边线的宽度

    如：UI图中文字距下边线距离为7 下边线宽度为2

    则padding: [0, 0, 9, 0]

                */
              // 这里的margin和axisLabel的margin要一致!
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                }, {
                  // offset: 0.9,
                  offset: 0.86,
                  /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                  color: '#fff' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#556677'
            }
          },
          splitLine: {
            show: false
          }
        }, {
          type: 'value',
          position: 'right',
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#556677'
            },
            formatter: '{value}'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series
      }
      this.lineChart.setOption(option)
    }
  }
}
